<template>
	<view>
		<view
			class="flex align-center justify-between pad-x-15 bg-white"
			style="margin-top: 1px;"
			@click="handleClick()"
		>
			<view class="flex flex-1 align-center">
				<view class="flex align-center w-px-90 font-14 h-px-50" style="border-right: 1px #eeeeee solid;">
					<text>{{ label }}</text>
				</view>
				
				<view
					class="flex flex-1 align-center border-rad-3"
					style="height: 40px;"
				>
					<view
						v-if="textMsgList.length > 0"
						class="flex align-center justify-center font-10 mar-l-10 color-white"
						style="width: 28px; height: 28px; border-radius: 50%; background: #e07285;"
					>
						<text>文字</text>
					</view>
					
					<view
						v-if="pictureList.length > 0"
						class="flex align-center justify-center font-10 mar-l-10 color-white"
						style="width: 28px; height: 28px; border-radius: 50%; background: #f58b41;"
					>
						<text>图片</text>
					</view>
					
					<view
						v-if="voiceList.length > 0"
						class="flex align-center justify-center font-10 mar-l-10 color-white"
						style="width: 28px; height: 28px; border-radius: 50%; background: #2cb42e;"
					>
						<text>语音</text>
					</view>
					
					<view
						v-if="videoList.length > 0"
						class="flex align-center justify-center font-10 mar-l-10 color-white"
						style="width: 28px; height: 28px; border-radius: 50%; background: #16b58c;"
					>
						<text>视频</text>
					</view>
				</view>
			</view>
			
			<view class="mar-r-15 w-px-20"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 组件名称
			label: {
				type: String,
				default: ''
			},
			
			// 文本列表
			textMsgList: {
				type: Array,
				default: []
			},
			
			// 图片列表
			pictureList: {
				type: Array,
				default: []
			},
			
			// 语音列表
			voiceList: {
				type: Array,
				default: []
			},
			
			// 视频列表
			videoList: {
				type: Array,
				default: []
			}
		},
		
		data() {
			return {
				
			}
		},
		
		methods: {
			// 点击组件的回调
			handleClick() {
				this.$emit('handleClick')
			},
		}
	}
</script>

<style>
</style>